<template>
    <div class="marker-wrap">
        <slot></slot>
    </div>
</template>

<script>
    import {newPoint} from '@/utils/bmap-utils.js'
    export default {
        name: "Markers",
        components: {},
        props: {
            position: {},
            offset: {},
            icon: {},
            massClear: {
                type: Boolean,
                default: true
            },
            dragging: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {}
        },
        mounted() {
            this.load()
        },
        watch: {
            'position.lnt'(val, oldval){
                const {global, originOverlay} = this
                if(val !== oldval){
                    console.log(val)
                    originOverlay.setPosition(newPoint(global.BMap, val))
                }
            },
            'position.lat'(val, oldval){
                console.log('aa')
                const {global, originOverlay} = this
                if(val !== oldval){
                    originOverlay.setPosition(newPoint(global.BMap, val))
                }
            }
        },
        computed: {
            renderByParent () {
                return this.$parent.preventChildrenRender
            }
        },
        methods: {
            load() {
                console.log(this.position)
                const {global, map, position, $parent, renderByParent} = this

                let overlay = global.BMap && new global.BMap.Marker(newPoint(global.BMap, position))
                this.originOverlay = overlay
                if (renderByParent) {
                    console.log(renderByParent)
                    $parent.reload()
                } else {
                    console.log($parent.map)
                    $parent.map&&$parent.map.addOverlay(overlay)
                }
            }
        }
    };
</script>
